Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ReactNodeViewRenderer): Add as option and pass through to ReactRenderer #2213

Merged
merged 3 commits into from
Dec 2, 2021

Conversation

jessicalc
Copy link
Contributor

Right now, ReactNodeViewRenderer renders as a <div class="react-renderer"> wrapper. We'd like to be able to pass an as prop to specify what kind of top-level HTMLElement corresponds with our node content. This could give people are a more granular control over how their elements get added (i.e. instead of just div or span, we could let people render an img or li directly).

At Gamma, our main use case is to allow us to have li elements adjacent to each other (rather than nested inside the div produced by ReactNodeViewRenderer).

Additionally, (and for a separate PR), we like being able to pass the top-level <li> an indent attribute to dynamically do counter-resets. Right now there's no flexibility to add arbitrary attributes to the outermost wrapper when you use ReactNodeViewRenderer, so we're working on a way to do this in our own fork. We'll probably attempt this in a separate PR.

@netlify
Copy link

netlify bot commented Dec 1, 2021

✔️ Deploy Preview for tiptap-embed ready!

🔨 Explore the source changes: 2f154c0

🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/61a7ac7ee6b6f600087318d2

😎 Browse the preview: https://deploy-preview-2213--tiptap-embed.netlify.app

@hanspagel
Copy link
Contributor

Thanks for the PR! The build is failing though:

[!] (plugin rpt2) Error:/packages/react/src/ReactNodeViewRenderer.tsx(23,14): semantic error TS2724: 'React' has no exported member named 'Element'. Did you mean 'CElement'?

Would you mind to look into that? You can test it locally with yarn build:packages.

@philippkuehn
Copy link
Contributor

It’s probably React.ElementType

export interface NodeViewWrapperProps {
[key: string]: any,
as?: React.ElementType,
}

@philippkuehn philippkuehn merged commit dedcf17 into ueberdosis:main Dec 2, 2021
@philippkuehn
Copy link
Contributor

thanks!

andrewlu0 pushed a commit to trybaseplate/tiptap that referenced this pull request Oct 20, 2023
)

* Add `as` option and pass through to ReactRenderer

* Fix type, oops

* type `as` as string
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants